<template>
  <!-- 剔除案件池 -->
  <section class="page undistributed-case wit">
    <data-form :model="importModel" @onSearch="refreshData" :page="pageService" :rules="undistributedRule" @handleResetForm="follFeedback">
      <template slot="inputs">
        <el-form-item label="账户号" prop="caseNumber">
          <el-input v-model="importModel.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="客户号" prop="personalNo">
          <el-input v-model="importModel.personalNo"></el-input>
        </el-form-item>
        <el-form-item label="客户姓名" prop="personalName">
          <el-input v-model="importModel.personalName" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="证件号" prop="idCard">
          <el-input v-model="importModel.idCard" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="账户总金额" prop="caseMoney">
          <number-range v-model="importModel.caseMoney" :maxlength="20"></number-range>
        </el-form-item>
        <el-form-item label="账户逾期总金额" prop="overdueAmount">
          <number-range v-model="importModel.overdueAmount" :maxlength="20"></number-range>
        </el-form-item>
        <el-form-item label="逾期期数" prop="overduePeriod">
          <number-range v-model="importModel.overduePeriod" :maxlength="20"></number-range>
        </el-form-item>
        <el-form-item label="逾期天数" prop="overdueDays">
          <number-range v-model="importModel.overdueDays" :maxlength="20"></number-range>
        </el-form-item>
        <el-form-item label="还款日" prop="payDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="importModel.payDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="importModel.payDate"></number-range>
          <!-- <el-input type="number" v-model="importModel.payDate"></el-input> -->
        </el-form-item>
        <el-form-item label="账单日" prop="billDate">
          <!-- <el-date-picker type="daterange" :editable="false" v-model="importModel.billDate" placeholder="选择日期时间" clearable /> -->
          <number-range v-model="importModel.billDate"></number-range>
          <!-- <el-input type="number" v-model="importModel.billDate"></el-input> -->
        </el-form-item>
        <el-form-item label="手机号" prop="mobileNo">
          <el-input v-model="importModel.mobileNo" :maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="产品编号" prop="productNo">
          <el-input v-model="importModel.productNo" :maxlength="20"></el-input>
        </el-form-item>
        <!-- 剔除渠道 eliminateChannel -->
        <el-form-item label="剔除渠道" prop="eliminateChannel">
          <el-select v-model="importModel.eliminateChannel" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData('ChannelType')" v-show="code !== 'ROBOT'" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="策略代码" prop="strategyNo">
          <el-input v-model="importModel.strategyNo" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="生效时间" prop="effectiveDate">
          <el-date-picker v-model="importModel.effectiveDate" :editable="false" type="daterange" placeholder="选择日期" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效时间" prop="expirationDate">
          <el-date-picker v-model="importModel.expirationDate" type="daterange" :editable="false" placeholder="选择日期" clearable>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="AT" prop="at">
          <!-- <number-range v-model="importModel.at"></number-range> -->
          <el-input v-model="importModel.at"></el-input>
        </el-form-item>
        <el-form-item label="CT" prop="ct">
          <!-- <number-range v-model="importModel.ct"></number-range> -->
          <el-input v-model="importModel.ct"></el-input>
        </el-form-item>
        <el-form-item label="队列代码" prop="queueCode">
          <el-input v-model="importModel.queueCode" :maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="入催原因码" prop="reasonCode">
          <el-select v-model="importModel.reasonCode" placeholder="请选择" clearable>
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'ReasonCode'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="剔除类型" prop="eliminateType">
          <el-select v-model="importModel.eliminateType" placeholder="请选择" clearable>
            <!-- 这里的$dict.getDictData ("") 括号里面是枚举 -->
            <el-option v-for="{ index, name, code } in $dict.getDictData(
                'EliminateType'
              )" :key="index" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
      </template>
    </data-form>
    <!-- <data-box
      :data="importDataSet"
      :selectionList.sync="selectionList"
      @onPageChange="refreshData"
      :page="pageService"
    > -->
    <data-box :data="importDataSet" @onPageChange="refreshData" :page="pageService">
      <template slot="columns">
        <el-table-column prop="caseNumber" label="账户号" :min-width="$helper.getColumnWidth(6)">
          <template slot-scope="scope">
            <a type="text" @click="openExecutionPage(scope.row)">{{
              scope.row.caseNumber
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="personalNo" label="客户号" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="personalName" label="客户姓名" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="idCard" label="证件号" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="mobileNo" label="手机号" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="productNo" label="产品编号" :min-width="$helper.getColumnWidth(5)">
        </el-table-column>
        <el-table-column prop="overduePeriod" label="逾期期数" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="overdueDays" label="逾期天数" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="caseMoney" label="账户总金额" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.toThousands(row.caseMoney)">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="账户逾期总金额" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.toThousands(row.overdueAmount)">
        </el-table-column>
        <el-table-column prop="reasonCode" label="入催原因码" :formatter="
            row => $filter.dictConvert(row.reasonCode, 'ReasonCode')
          " :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <el-table-column prop="queueCode" label="队列代码" :min-width="$helper.getColumnWidth(6)">
        </el-table-column>
        <el-table-column prop="eliminateChannel" label="剔除渠道" :formatter="
            row => $filter.dictConvert(row.eliminateChannel, 'ChannelType')
          " :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="eliminateType" label="剔除类型" :formatter="
            row => $filter.dictConvert(row.eliminateType, 'EliminateType')
          " :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="strategyNo" label="策略代码" :min-width="$helper.getColumnWidth(3)">
        </el-table-column>
        <!-- <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.payDate)" sortable />
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" :formatter="row => $filter.dateFormat(row.billDate)" sortable /> -->
        <el-table-column prop="payDate" label="还款日" :min-width="$helper.getColumnWidth(4)" sortable />
        <el-table-column prop="billDate" label="账单日" :min-width="$helper.getColumnWidth(4)" sortable />
        <el-table-column prop="effectiveDate" label="生效时间" :formatter="row => $filter.dateFormat(row.effectiveDate)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
        <el-table-column prop="expirationDate" label="失效时间" :formatter="row => $filter.dateFormat(row.expirationDate)" :min-width="$helper.getColumnWidth(4)">
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies, Layout, Auth } from "~/core/decorator";
import NumberRange from "~/components/common/number-range.vue";
import { PageService } from "~/utils/page.service";
import { namespace, State } from "vuex-class";
// import { CaseInfoService } from "../../services/domain-service/case-info.service";
import { SynthesizeQueryService } from "../../services/domain-service/synthesize-query.service";
import { CASE_CHANNEL, MENU_CHANNEL } from "~/config/enum.config";

@Auth(120)
@Layout("workspace")
@Component({
  components: {
    NumberRange
  }
})
export default class CullPool extends Vue {
  @State
  public principalList: any;
  @Dependencies(PageService)
  private pageService: PageService;
  // @Dependencies(CaseInfoService)
  // private CaseInfoService: CaseInfoService;
  @Dependencies(SynthesizeQueryService)
  private SynthesizeQueryService: SynthesizeQueryService;
  private importModel: any = {
    caseNumber: "",
    personalNo: "",
    eliminateType: "",
    idCard: "",
    personalName: "",
    caseMoney: { min: "", max: "" },
    overdueAmount: { min: "", max: "" },
    overduePeriod: { min: "", max: "" },
    overdueDays: { min: "", max: "" },
    payDate: { min: "", max: "" },
    billDate: { min: "", max: "" },
    mobileNo: "",
    productNo: "",
    eliminateChannel: "",
    strategyNo: "",
    effectiveDate: { min: "", max: "" },
    expirationDate: { min: "", max: "" },
    at: "",
    ct: "",
    queueCode: "",
    reasonCode: "",
  };
  private dialog: any = {
    manual: false
  };

  // 表单验证规则
  private undistributedRule = {
    mobileNo: [{validator: this.$validator.phoneNumber,trigger: "blur"}],
    idCard: [{ validator: this.$validator.idcardUscc, trigger: "change" }]
  };

  private importDataSet: any = [];
  private selectionList: any[] = [];
  private caseDetail: any = {};

  private paramsHandler () {
    const params = { ...this.importModel };
    params.caseMoneyMax = this.importModel.caseMoney.max;
    params.caseMoneyMin = this.importModel.caseMoney.min;
    params.overdueAmountMax = this.importModel.overdueAmount.max;
    params.overdueAmountMin = this.importModel.overdueAmount.min;
    params.overduePeriodMax = this.importModel.overduePeriod.max;
    params.overduePeriodMin = this.importModel.overduePeriod.min;
    params.overdueDaysMax = this.importModel.overdueDays.max;
    params.overdueDaysMin = this.importModel.overdueDays.min;

    // params.payDateMax = this.$filter.dateRanageFormat(this.importModel.payDate).end;
    // params.payDateMin = this.$filter.dateRanageFormat(this.importModel.payDate).start;
    // params.billDateMax = this.$filter.dateRanageFormat(this.importModel.billDate).end;
    // params.billDateMin = this.$filter.dateRanageFormat(this.importModel.billDate).start;
    params.payDateMax = this.importModel.payDate.max;
    params.payDateMin = this.importModel.payDate.min;
    params.billDateMax = this.importModel.billDate.max;
    params.billDateMin = this.importModel.billDate.min;
    params.effectiveDateMax = this.$filter.dateRanageFormat(
      this.importModel.effectiveDate
    ).end;
    params.effectiveDateMin = this.$filter.dateRanageFormat(
      this.importModel.effectiveDate
    ).start;
    params.expirationDateMax = this.$filter.dateRanageFormat(
      this.importModel.expirationDate
    ).end;
    params.expirationDateMin = this.$filter.dateRanageFormat(
      this.importModel.expirationDate
    ).start;
    // params.AT = this.importModel.AT.max;
    // params.at = this.importModel.AT.min;
    // params.CT = this.importModel.CT.max;
    // params.ct = this.importModel.CT.min;

    delete params.caseMoney;
    delete params.overdueAmount;
    delete params.overduePeriod;
    delete params.overdueDays;
    delete params.payDate;
    delete params.billDate;
    delete params.effectiveDate;
    delete params.expirationDate;
    return params;
  }

  /**
   * 获取待分配案件
   */
  private refreshData () {
    const request: any = {
      ...this.paramsHandler()
    };
    this.SynthesizeQueryService.queryEliminateCaseList(request, this.pageService).subscribe(res => {
      this.importDataSet = res;
      this.selectionList = [];
    })
  }

  private mounted () {
    this.refreshData();
  }

  /**
   * 手动分案
   */
  private manualDistruibute () {
    // if (this.selectionList.length === 0) {
    // this.$message("请选择要分配的案件");
    this.dialog.manual = true;
    // } else {
    //     this.dialog.manual = true;
    // }
  }

  /**
   * 重置numberRange
   */
  private follFeedback () {
    this.importModel.caseMoney = { min: "", max: "" };
    this.importModel.overdueAmount = { min: "", max: "" };
    this.importModel.overduePeriod = { min: "", max: "" };
    this.importModel.overdueDays = { min: "", max: "" };
    this.importModel.payDate = { min: "", max: "" };
    this.importModel.billDate = { min: "", max: "" };
    this.importModel.effectiveDate = { min: "", max: "" };
    this.importModel.expirationDate = { min: "", max: "" };
    // this.importModel.AT = { min: "", max: "" };
    // this.importModel.CT = { min: "", max: "" };
  }

  /**
   * 进入查看执行页
   */
  private openExecutionPage (row) {
    this.$router.openCaseDetail(row.id, {
      menuChannel: MENU_CHANNEL.Case_await,
      hiddenAction: false,
      hiddenRemark: true
    });
  }
  /**
   * 导出案件
   */
  private exportCaseInfo () {
    const ids = this.selectionList.map(v => v.id);
    const request: any = {
      ...this.importModel,
      caseIds: ids
    };
    // this.CaseInfoService.distributeCaseInfosExport(request).subscribe(data =>
    //   this.$common.downloadFile(data.url)
    // );
  }

  /**
   * 导出催记
   */
  private exportFollowup () {
    const ids = this.selectionList.map(v => v.id);
    const request: any = {
      ...this.importModel,
      caseIds: ids
    };
    // this.CaseInfoService.distributeCaseInfosExportFollow(request).subscribe(data => this.$common.downloadFile(data.url)
    // );
  }
}
</script>

<style lang="less">
.wit .el-form-item > label {
  width: 100px !important;
}
</style>
